<template>
  <div class="bg chart-container">

    <!-- 四个小图 -->
    <div style="margin-bottom: 20px;">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-card>
            <div style="display: flex;">
              <div style="flex: 1; margin-left: 0; width: 50px; height: 50px;
              display: flex; justify-content: center; align-items: center;">
                <img src="@/assets/logo/chart-1.png" alt="" style="width: 150%">
              </div>
              <div class="four-chart">
                <div>当前在校学员数: </div>
                <div style="display: flex; align-items: center; justify-content: center; font-size: 25px">
                  {{ countMap.studentCurrentCount }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div style="display: flex;">
              <div style="flex: 1; margin-left: 0; width: 50px; height: 50px;
              display: flex; justify-content: center; align-items: center;">
                <img src="@/assets/logo/chart-2.png" alt="" style="width: 150%">
              </div>
              <div class="four-chart">
                <div>当前可用车辆数：</div>
                <div style="display: flex; align-items: center; justify-content: center; font-size: 25px">
                  {{ countMap.carCurrentCount }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div style="display: flex;">
              <div style="flex: 1; margin-left: 0; width: 50px; height: 50px;
              display: flex; justify-content: center; align-items: center;">
                <img src="@/assets/logo/chart-3.png" alt="" style="width: 150%">
              </div>
              <div class="four-chart">
                <div>待上课程预约数：</div>
                <div style="display: flex; align-items: center; justify-content: center; font-size: 25px">
                  {{ countMap.reserveCourseCount }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div style="display: flex;">
              <div style="flex: 1; margin-left: 0; width: 50px; height: 50px;
              display: flex; justify-content: center; align-items: center;">
                <img src="@/assets/logo/chart-4.png" alt="" style="width: 150%">
              </div>
              <div class="four-chart">
                <div>待练车辆预约数：</div>
                <div style="display: flex; align-items: center; justify-content: center; font-size: 25px">
                  {{ countMap.reserveCarCount }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 两个大图 -->
    <div>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card>
            <div style="width: 100%;height: 400px;" id="coursePie">
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div style="width: 100%;height: 400px;" id="carLine">
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>


<script>
import * as echarts from 'echarts' // 导入 ECharts 库

// 课程预约图的配置项
const coursePieOption = {
  // 标题相关配置
  title: {
    text: '本月已通过课程预约图',
    subtext: '比例',
    left: 'center'
  },
  // 提示框相关配置
  tooltip: {
    trigger: 'item'
  },
  // 图例相关配置
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  // 系列数据相关配置
  series: [
    {
      name: '预约数',
      type: 'pie',
      radius: '50%',
      data: [],
      label: {
        show: true,
        formatter: '{b}({d}%)' // 格式化显示内容
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)' // 高亮时的样式
        }
      }
    }
  ]
};

// 车辆预约图的配置项
const carLineOption = {
  // 标题相关配置
  title: {
    text: '本月车辆预约图',
    subtext: '按预约时间',
  },
  // 提示框相关配置
  tooltip: {
    trigger: 'axis'
  },
  // 工具栏相关配置
  toolbox: {
    show: true,
    feature: {
      // 数据区域缩放
      dataZoom: {
        yAxisIndex: 'none'
      },
      // 数据视图
      dataView: {readOnly: false},
      // 切换图表类型
      magicType: {type: ['line', 'bar']},
      // 还原
      restore: {},
      // 保存为图片
      saveAsImage: {}
    }
  },
  // X 轴相关配置
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  // Y 轴相关配置
  yAxis: {
    type: 'value',
    interval: 1 // 设置间隔为 1，表示至少间隔一个标签
  },
  // 系列数据相关配置
  series: [
    {
      name: '预约数',
      type: 'line',
      data: [],
      markLine: { // 标记线相关配置
        data: [
          {type: 'average', name: '平均值'},
          [{symbol: 'none', x: '90%', yAxis: 'max'},
            {
              symbol: 'circle', label: {position: 'start', formatter: '最大值'},
              type: 'max', name: '最高点'
            }],
          {type: 'min', name: '最低点'}
        ]
      }
    }
  ]
};

export default {
  name: "Chart",

  data() {
    return {
      // 存储各类数量的映射对象
      countMap: {
        studentCurrentCount: 0,
        carCurrentCount: 0,
        reserveCarCount: 0,
        reserveCourseCount: 0,
      }
    }
  },

  mounted() {
    // 初始化折线图实例
    let carLineDom = document.getElementById('carLine');
    let carLineChart = echarts.init(carLineDom);

    // 初始化饼图实例
    let coursePieDom = document.getElementById('coursePie');
    let coursePieChart = echarts.init(coursePieDom);

    // 获取图表数据并设置配置项
    this.$request.get('/chart').then(res => {
      // 设置折线图的 X 轴和系列数据
      carLineOption.xAxis.data = res.data?.line?.map(v => v.date) || []
      carLineOption.series[0].data = res.data?.line?.map(v => v.value) || []
      carLineChart.setOption(carLineOption)

      // 设置饼图的系列数据
      coursePieOption.series[0].data = res.data?.pie || []
      coursePieChart.setOption(coursePieOption)
    })

    // 获取角色统计数据
    this.$request.get('count').then(res => {
      if (res.code === '200') {
        this.countMap = res.data;
      } else {
        console.error('获取统计数据失败:', res.msg);
      }
    }).catch(error => {
      console.error('获取统计数据发生错误:', error);
    });
  },
}
</script>


<style>
.four-chart{
  flex: 2;
  font-size: 18px;
  font-weight: bold;
}

.chart-container {
  background:
      linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), /* 白色半透明遮罩让颜色变淡 */
      url('~@/assets/bg/chart.png') center/cover no-repeat;
}

.el-col-12 .el-card {
  /* 大图表卡片毛玻璃效果 */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.el-card{
border: 2px solid rgba(0,0,0,0.15)!important;
}
</style>